<template>
  <div class="friends music-cpns-common">
    <div class="friend-main">
      <h2>我的朋友</h2>
      <div class="friend-user">
        <div class="friend-box" v-for="item in friends" :key="item.userId">
          <img
            :src="$filters.formatImgSize(item.avatarUrl, 200)"
            alt="404"
            @click="togUser(item.userId)"
          />
          <p>{{ item.nickname }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { getFriends } from '@/service/friends'

const store = useStore()
const router = useRouter()
const friends = ref<any>([])
const user: any = computed(() => store.state.login.profile)
const getUsers = (id: number) => {
  getFriends(id).then((res: any) => {
    friends.value = res.follow
  })
}
if (user.value.userId) {
  getUsers(user.value.userId)
}
const togUser = (id: number) => {
  router.push('/main/user' + id)
}
</script>

<style scoped>
.friends {
  width: 100%;
  padding-top: 30px;
}
.friend-main {
  width: 90%;
  margin: 0 auto;
}
.friend-main h2 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
}
.friend-user {
  margin-top: 40px;
  display: flex;
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.friend-box {
  width: 12%;
  margin-right: 28px;
}
.friend-box img {
  width: 100%;
  border-radius: 50%;
  cursor: pointer;
}
.friend-box p {
  text-align: center;
  margin-top: 15px;
  color: #888;
}
.friend-box p:hover {
  color: #333;
  cursor: default;
}
</style>
